// 引入css样式
require("../../assets/css/common.css");
require("../../assets/font_44fp3ls0tzq/iconfont.css");
require("../../assets/css/reset.css");
require("../../assets/css/normalize.css");
require("../../assets/css/tabbar.less");
require("./mime_change.less");

// 引入模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");

document.addEventListener("DOMContentLoaded", function () {
	//一.实现跳转
	dom.get("#header span").addEventListener("click", function () {
		history.back();
	});

	//二.头像
	dom.get("#avatorbox").addEventListener("change", function () {
		//formdate是一种表单数据对key/value的构造方式
		let fd = new FormData();
		fd.append("files", this.files[0]);
		axios.post("/api/shared/uploadPortrait", fd).then((res) => {
			if (res.data.errno === 0) {
				dom.get("#avator").src = axios.defaults.baseURL + res.data.data.url;
				dom.get("#avator").dataset.value = res.data.data.url;
			} else {
				alert("上传失败");
			}
		});
	});

	//三.性别
	dom.get("#gender").addEventListener("click", function () {
		weui.picker(
			[
				{ label: "男", value: 0 },
				{ label: "女", value: 1 },
				{ label: "未知", value: 2 },
			],
			{
				onConfirm: function (result) {
					dom.get("#gender").textContent = result[0].label;
					dom.get("#gender").dataset.value = result[0].value;
				},
				title: "请选择性别",
			}
		);
	});

	//四.生日
	dom.get("#birthday").addEventListener("click", function () {
		weui.datePicker({
			start: 1990,
			end: new Date().getFullYear(),
			onConfirm: function (result) {
				let Date = result.map((v) => v.value).join("-");
				dom.get("#birthday").textContent = Date;
			},
			title: "请选择出生日期",
		});
	});

	//五.请求接口(所在省份)
	let provinceId = 0;
	dom.get("#province").addEventListener("click", function () {
		axios.get("api/shared/province").then((res) => {
			let provinceArr = res.data.data.map((v) => {
				return { label: v.name, value: v.id };
			});
			weui.picker(provinceArr, {
				onConfirm: function (result) {
					dom.get("#province").textContent = result[0].label;
					dom.get("#province").dataset.value = result[0].value;
					provinceId = result[0].value;
					// console.log(provinceId);
				},
				title: "请选择省份",
			});
		});
	});

	//六.所在城市
	dom.get("#city").addEventListener("click", async function () {
		if (provinceId === 0) {
			alert("请选择省份");
			return;
		}
		const cityID = await axios.get("/api/shared/city?provinceId=" + provinceId);
		console.log(cityID.data.data);
		let cityArr = cityID.data.data.map((v) => {
			return { label: v.name, value: v.id };
		});
		weui.picker(cityArr, {
			onConfirm: function (result) {
				// console.log(result);
				dom.get("#city").textContent = result[0].label;
				dom.get("#city").dataset.value = result[0].value;
			},
			title: "请选择城市",
		});
	});

	//七:个性签名
	dom.get("#textarea").addEventListener("input", function () {
		dom.get("#num").textContent = this.value.length;
	});

	//个人资料存储
	dom.get("#btn").addEventListener("click", function () {
		let nickName = dom.get("#nickName").value;
		let gender = Number(dom.get("#gender").dataset.value);
		let provinceId = Number(dom.get("#province").dataset.value);
		let cityId = Number(dom.get("#city").dataset.value);
		let birthday = dom.get("#birthday").textContent;
		let imgUrl = dom.get("#avator").dataset.value;
		let sign = dom.get("#textarea").value;
		console.log(nickName, gender, provinceId, cityId, birthday, imgUrl, sign);

		axios
			.post("/api/user/changeInfo", {
				nickName,
				gender,
				provinceId,
				cityId,
				birthday,
				imgUrl,
				sign,
			})
			.then((res) => {
				if (res.data.errno === 0) {
					localStorage.setItem("token", res.data.data.token);
					history.back();
					alert("修改成功");
				} else {
					alert("修改失败");
				}
			});
	});

	// 个人信息回填
	axios.get("/api/user/info").then(async (res) => {
		let data = res.data.data;
		console.log(data);
		// 头像
		if (data.imgUrl) {
			dom.get("#avator").src = axios.defaults.baseURL + data.imgUrl;
			dom.get("#avator").dataset.value = data.imgUrl;
		}
		// 昵称
		dom.get("#nickName").value = data.nickName;
		// 性别
		let genderArr = ["男", "女", "保密"];
		dom.get("#gender").textContent = genderArr[data.gender];
		dom.get("#gender").dataset.value = data.gender || 0;

		// 生日
		dom.get("#birthday").textContent = data.birthday;
		// 省份
		let pro = await axios.get("/api/shared/province");
		let [province] = pro.data.data.filter((v) => v.id === data.provinceId);
		dom.get("#province").textContent = province.name;
		dom.get("#province").dataset.value = data.provinceId; //data.provinceId初始化id，若是没有这句，当用户不该数据，就没有自定义属性，在手搜集信息的时候拿不到数据
		// 城市
		let city = await axios.get(
			"/api/shared/city?provinceId=" + data.provinceId
		);
		let [curCity] = city.data.data.filter((v) => v.id === data.cityId);
		dom.get("#city").textContent = curCity.name;
		dom.get("#city").dataset.value = data.cityId;
		// 个性签名
		dom.get("#textarea").value = data.sign;
	});
});
